import React, { useEffect, useRef, Fragment } from 'react';
import { Card, Menu, Spin } from 'antd';
import debounce from 'lodash/debounce';
import styles from './index.less';

const SlideTabs = ({
    tabs,
    activeKey,
    children,
    onChange,
    loading = false,
    ...rest
}) => {
    const { cardStyle = {}, cardProps = {} } = rest;
    const first = useRef(true);
    const slidedTabBody = useRef(null);
    const refs = tabs.map(item => ({
        // eslint-disable-next-line react-hooks/rules-of-hooks
        ref: useRef(null),
        key: item.key
    }));
    const scrollByRef = dom => {
        // if (!dom) return;
        slidedTabBody.current.scrollTop = dom.offsetTop - 20;
    };
    const eventCallback = (_, e) => {
        const num = 100;
        // if (e.target.scrollTop > 290) {
        //     const element = refs[1];
        //     onChange(element.key);
        // }
        for (let index = refs.length - 1; index > 0; index -= 1) {
            const element = refs[index];
            if (element.ref.current) {
                if (e.target.scrollTop > 0) {
                    if (
                        element.ref.current.offsetTop - e.target.scrollTop <
                        num
                    ) {
                        onChange(element.key);
                        break;
                        // continue;
                    }
                } else {
                    onChange(refs[0].key);
                }
            }
        }
    };
    useEffect(() => {
        slidedTabBody.current.addEventListener(
            'scroll',
            debounce(e => eventCallback(slidedTabBody.current, e), 0)
        );
        return () => {
            slidedTabBody.current.removeEventListener('scroll', eventCallback);
        };
    }, []);
    useEffect(() => {
        if (activeKey) {
            const findIndex = tabs.findIndex(tab => tab.key === activeKey);
            if (findIndex === -1) {
                throw new Error(`${activeKey} 不是正确的 key!`);
            } else if (findIndex === 0) {
                slidedTabBody.current.scrollTop = 0;
            } else {
                // eslint-disable-next-line no-unused-expressions
                first.current && scrollByRef(refs[findIndex].ref.current);
            }
            first.current = false;
        }
    }, [activeKey]);
    return (
        <Fragment>
            <Spin spinning={loading}>
                <Menu
                    className={styles.vv_tabs}
                    mode="horizontal"
                    onClick={e => {
                        const findIndex = tabs.findIndex(
                            tab => tab.key === e.key
                        );
                        scrollByRef(refs[findIndex].ref.current);
                        debounce(onChange, 0)(e.key);
                    }}
                    selectedKeys={[activeKey]}
                    style={{ padding: '0 24px' }}
                >
                    {tabs.map(item => (
                        <Menu.Item key={item.key}>{item.label}</Menu.Item>
                    ))}
                </Menu>
                <div ref={slidedTabBody} style={{
                    height: 'calc(100vh - 370px)',
                    overflowY: 'auto',
                    position: 'relative'
                }}>
                    <Card
                        bordered={false}
                        loading={loading}
                        style={{
                            ...cardStyle
                        }}
                        {...cardProps}
                    >
                        {children(refs)}
                    </Card>
                </div>
            </Spin>
        </Fragment>
    );
};
export default SlideTabs;
